@extends("home.footer")
@section("content")
        <!doctype html>
<html>
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="药快"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">



    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <title>产品详情</title>

    <link rel="stylesheet" href="{{asset('css/font-awesome.min.css')}}">
    <link rel="stylesheet" href="{{ asset('myhome/css/common.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/header.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/footer.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/index.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/responsive.css') }}">
    <!-- banner -->
    <script type="text/javascript" src="{{ asset('jquery-1.8.3.min.js') }}/"></script>
    <script type="text/javascript" src="{{ asset('myhome/js/jquery.fly.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('myhome/js/swipe-min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('myhome/js/common.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('myhome/css/swiper.min.css') }}">
    <!-- banner -->
    <style type="text/css">
        .swiper-slide a img {
            width: 100%;
        }
        .swiper-pagination-bullet {
            background: #BCBCBC;
            opacity: 0.5;
        }
        .swiper-pagination-bullet-active {
            background: #FF9F00;
            opacity: 0.8;
        }
        .main-container a.ckbigimg{ background-color:rgba(120,120,120,1); font-size: .7rem;color:#fff !important;padding:.2rem 0;    margin-left: auto;
            margin-right: auto; width:100%; height:100%;
            text-align: center; display: block; margin-top: -1.1rem; z-index: 1; position: relative;}
        .list-title{ background-color:#fff; margin-top:0; top:0; box-sizing:border-box; clear: both;}
        .list div span.guige{  display: block;  float: right;  top:0.7rem;  line-height:1.2rem;  color: rgba(0, 0, 0, .75);
            font-size: .7rem;  font-weight:bold;  }

        .list div{
            margin:0 1rem 0 1rem;  line-height:1.2rem; font-size:.8rem; padding: .7rem .1rem .7rem .3rem; border:none;
        }
        .buy{ height:3.2rem; padding:1.0rem 0 .5rem 0; margin-bottom:.5rem;}
        .list-title div.goumai,.list-title div.gouwuche { width:50%; margin:0;padding:0; height:2.0rem; display:inline-block; float:left; vertical-align:top; text-align: center;}
        .list-title div.goumai a,.list-title div.gouwuche a{  padding:.5rem 1.5rem; color:#fff; line-height: 1.2rem; text-align: center;border-radius: .2rem; }
        .list-title div.goumai a{ background-color:#E94A4A;}
        .list-title div.gouwuche a{ background-color:#E66F08;}
        .list div.gray{  background-color: #f2f2f2 !important; margin:0; padding:.7rem 1.1rem .7rem 1.3rem;
            font-weight:bold;  }
        .list div.proname{  font-weight:bold; padding-bottom:.2rem;}
        .list div.instruc{ line-height: 1.1rem; color:#999; font-size:.7rem;
            padding-bottom:.3rem; padding-top: .2rem;}
        .gray a i.icon-arrowright{ color:#333;
            float: right;}
        .icon-cart{ font-size:1rem;}
        .list-title div.storeinfo{  height:2.3rem; overflow: hidden;padding:1rem 0;}
        .price{ float:right; color:#E94A4A; font-weight:bold; line-height: 2.2rem;}
        .storeinfo .storeimg{ width:2.2rem; heigth:2.2rem; line-height: 1.2rem;
            float: left;
            bottom:-.5rem;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
        }
        .list div.storename{
            float: left;
            margin-left:0;}
        .storename p{
            line-height:1rem;display:inline-block; margin-top:-.5rem;top:-.5rem; position:relative; padding-left:.3rem;}
        .storename p.storename_0{ line-height: 1.2rem;
            display: block;}
        .storename p.loction{ line-height: 1.0rem; font-size: .7rem;}
        .shuoming ul{ padding-left:1rem;}
        .shuoming ul li{ }
        .shuoming .line h3{ text-align: center;}

        /** 评论区 **/
        .comment{  border:none; }
        .comment,.comment .line{ background:none;}
        .comment ul li h3{ text-align: center;}
        .comment .line{ padding:0;margin-top: .5rem; position:relative;}
        .comment ul li{ margin-top:.2rem; border-bottom:1px solid #dedede; background-color:#FFF; width: 100%;
            line-height: 2.5rem;  font-size: .8rem; color: rgba(0,0,0,.6); position: relative; padding: 0.2rem 0 0.2rem 0;}
        .comment ul li div{ padding:.2rem;margin:0px .2rem;    line-height: 1.2rem; border:none; font-size: .8rem; positon:relative;}
        .comment .head img.headimg{ width:2.2rem; border-radius:50%; line-height:1.2rem; padding:.1rem; border:1px solid #ededed;}
        .comment .head .wjx{ float:right; width: 5.6rem;}
        .comment .head span{ positon:relative;
            display: inline-block; right:.8rem; line-height: 1.2rem; margin-left:.5rem; color:#aaa; font-size:.8rem; margin-top:.5rem;}
        .comment .head span img{ width:.8rem;}
        .comment .head span.comname{ float:none; right:auto; top:-.5rem; position:relative;}
        .comment  .comcontent{ color:#E94A4A; font-weight:bold;}
        .comment .review{ background-color:#ededed; font-size:.7rem; padding:0.2rem .3rem; border-radius:.2rem; margin-right:.2rem;}
        .comment .review font{ font-weight:bold;}
    </style>
</head>

<body ontouchstart="return true;">
<!--内容区-->
<article class="main-container">
    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper">
            {{--@foreach($image as $k =>$v)--}}
            @foreach($image as $v)
                {{--            <div class="swiper-slide"><a href="{{asset('/upload/image/'.$v->url)}}"><img src="{{asset('/myhome/img/Pic13.jpg')}}" /></a></div>--}}
                <div class="swiper-slide"><a href="{{asset('/upload/product/'.$v->name)}}"><img src="{{asset('/upload/product/'.$v->name)}}" /></a></div>
                {{--@endforeach--}}
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <a class="ckbigimg">点击查看商品图片</a>

    <script type="text/javascript" src="{{ asset('myhome/js/swiper.min.js') }}"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            zoom: true,
            pagination: '.swiper-pagination',
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 2500,
            //paginationClickable: true,
            //nextButton: '.swiper-button-next',
            //prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            //autoplayDisableOnInteraction:false
        });
    </script>
    <div class="list list-title line">
        <div class="proname">{{ $product->name }}<span class="guige">{{ $product->specifications }}</span></div>
        <div class="instruc">{{ $product->summary }}</div>
    </div>
    <div class="list list-title">
        <div class="gray">配送至：{{ session("location")['city'].session("location")['district'].session("location")['street'] }}<a href=""><i class="icon-arrowright"></i></a> </div>
    </div>
    <div class="list list-title buy">
        <div class="goumai"><a href="{{ url('home/user/order/suborder/'.$product->id) }}">立即购买</a> </div>
        <div class="gouwuche" onclick='incart( "{{ $product->id }}",this)' ><a ><i class="icon-cart" id="addcar"></i>&nbsp;加购物车</a></div>
        {{--<div class="clear"></div>--}}
    </div>
    <div class="list list-title">
        <div class="storeinfo">
            <img src="{{ asset('myhome/img/head02.jpg')}}" class="storeimg" />
            <div class="storename">
                <p class="storename_0">{{ session("location")['name'] }}</p>
                <p class="loction">距离{{ session("location")['dist'] }}公里，在40分钟内送达</p>
            </div>
            <span class="price">￥{{ $product->price }}</span>
        </div>
    </div>

    <div class="list list-title shuoming">
        <ul class="line">
            <li><h3>说明书</h3></li>
            <li>
                {!! $product->instructions !!}
            </li>
        </ul>
    </div>

    <div class="comment">
        <ul class="line">
            <li ><h3>商品评价</h3></li>
            @foreach($comment as $c)
                <li >
                    <div class="head"><img src="@if(strstr($c->user->photo,"http://wx.qlogo.cn")) {{ $c->user->photo }} @else {{ url('upload/user/'.$c->user->photo) }} @endif" class="headimg" /><span class="comname">{{ $c->user->nickname }}</span>
                        <div class="wjx" >
                         <span>
                            @for($i=0;$i<$c->level;$i++)
                                 <img src="{{ asset('myhome/img/detail-iocn01.png') }}" />
                             @endfor
                         </span>
                        </div>
                    </div>
                    <div><font class="comcontent">评论：</font>{{ $c->content }}</div>
                    @foreach($c->replay as $r)
                        <div class="review">
                            <font>掌柜回复：</font>{{ $r->content }}
                        </div>
                    @endforeach
                </li>
            @endforeach
        </ul>
    </div>
    <div style="width:100%; height:2.5rem"></div>
</article>
<!--弹出圈圈loading-->
<div class="spinner" style="display: none;"><i></i></div>

<!--弹出loading-->
<div class="msg-loading" style="display: none;">
    <div class="msg-box">
        <div class="msg-load">
            <p>loading<span class="dotting"></span></p>
        </div>
        <div class="msg-top"></div>
        <div class="msg-left"></div>
        <div class="msg-right"></div>
    </div>
</div>
<script>
//    $(function() {
//        var tmp;
//        $('.gouwuche').live('click', function () {
//            if (tmp) tmp.remove();
//            var box = $(this);
//            var img = $('body').find('.swiper-slide-active');
//            tmp = img.clone();
//            var p = $(img).offset();
//            var p2 = $('#end').offset();
//            tmp.addClass('_box').css(p).appendTo(box);
//            p2 = $.extend(p2, {height: 5, width: 5, opacity: 10});
//            $(tmp).animate(p2, 1000, function () {
//                tmp.remove();
//            });
//        });
//    });

//点击商品加入购物车
function incart(pid,obj) {
    obj = obj;
    if("{{ session('homeuser') }}"){
        $.ajax({
            url: '{{ url("home/ajax/cart/incart") }}',
            async: false,				//是否异步
            type: 'post',				//请求方式
            data: {_token: "{{ csrf_token() }}",pid:pid},				//发送的数据
            dataType: 'json',			//响应的数据类型
            success: function (data)		//成功时回调函数
            {
                var tmp;
                if (data != false) {
                    //添加到购物车起飞效果
                    if (tmp) tmp.remove();
                    var box = $(obj);
                    var img = $('body').find('.swiper-slide-active').find('img');
                    tmp = img.clone();
                    var p = $(img).offset();
                    var p2 = $('#end').offset();
                    tmp.addClass('_box').css(p).appendTo(box);
                    p2 = $.extend(p2, {height: 5, width: 5, opacity: 10});
                    $(tmp).animate(p2, 700, function () {
                        $('#num').attr("style", "display:block");
                        $('#num').html(data);
                        tmp.remove();
                    });
                } else {
                    alert("添加购物车失败！")
                }
            }
        });
    }else{
        if(confirm("您还没有登录，是否登录")){
            location.href = "{{ url('home/user/login') }}";
        }
    }

}
</script>
@stop